<template>
    <div id="orderPay">
        <!-- 公共头部 -->
        <myHeader title="支付中心" class="myHeader">
            <!-- 左侧按钮插槽 -->
            <template #left>
                <i class="back-icon" @click="backFn"></i>
            </template>

            <!-- 右侧按钮插槽 -->
            <template #right>
                <span class="more-icon"></span>
            </template>
        </myHeader>
        <!-- 支付中心标题 -->
        <h1 class="orderPay-title">支付中心</h1>
        <!-- 付款金额 -->
        <div class="orderPay-money">
            <p class="orderPay-money-title">付款金额</p>
            <p class="orderPay-money-price">￥{{$store.getters.initTotal}}</p>
        </div>
        <!-- 支付方式 -->
        <div class="orderPay-manner">
            <h1 class="orderPay-manner-title">支付方式</h1>
            <orderPayManner :data="platformData"></orderPayManner>
        </div>
        
        <!-- 立即支付 -->
        <div class="orderPay-pay">
            <van-button type="danger" color="#eb291d" @click="payFn">立即支付</van-button>
        </div>
    </div>
</template>

<script>
// 轻提示ui
import { Toast } from 'vant';
// 公共头部
import myHeader from '@/components/myHeader/myHeader'
// 支付方式
import orderPayManner from './orderPayManner'
export default {
    components:{
        myHeader,
        orderPayManner
    },
    data() {
        return {
            platformData:[
                {title:"支付宝",img:"../../../static/images/orderPay/Alipay.png",id:"0",},
                {title:"花呗",img:"../../../static/images/orderPay/Ant-Credit-Pay.png",id:"1",},
                {title:"微信",img:"../../../static/images/orderPay/WeChat.png",id:"2",},
            ]
        }
    },
    methods: {
        payFn(){
            // 加载中轻提示
            Toast.loading({
                message: '支付中...',
                forbidClick: true,
            });
            // 支付成功后跳转
            setTimeout(()=>{
                Toast.success('支付成功');
                 setTimeout(()=>{
                     this.$router.push({path:"orderDetails"}).catch(err=>{});
                 },1500)
            },2000)
        },
        // 返回上一页
        backFn(){
            this.$router.go(-1)
        }
    },
}
</script>

<style lang="less" scoped>
#orderPay{
    background-color: #f6f6f6;
    height: 100%;
    // 公共头部
    .myHeader{
        border-bottom: 1px #dfdfdf solid;
        background-color: #fff;
        // 返回图标
        .back-icon {
            display: block;
            background: url("../../../static/images/shoppingCart/back-icon.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
        .more-icon {
            display: block;
            background: url("../../../static/images/shoppingCart/more-icon.png") no-repeat 0 0;
            background-size: contain;
            width: 57px;
            height: 21px;
        }
    }
    // 支付中心标题
    .orderPay-title{
        font-size: 40px;
        padding: 41px 0 39px 24px;
    }
    // 付款金额
    .orderPay-money{
        width: 700px;
        height: 86px;
        line-height: 86px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        font-size: 34px;
        font-weight: 550;
        .orderPay-money-title{
            margin-left: 23px;
            
        }
        .orderPay-money-price{
            margin-right: 35px;
        }
    }
    // 支付方式
    .orderPay-manner{
        width: 700px;
        background-color: #ffffff;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 34px;
        .orderPay-manner-title{
            font-weight: 550;
            padding: 38px 0 0 23px;
            margin-bottom: 37px;
        }
    }
    // 立即支付
    .orderPay-pay{
        position: fixed;
        bottom: 0px;
        width: 100%;
        .van-button--danger{
            width: 100%;
            height: 98px;
        }
    }
}


</style>